<template>
  <!-- 参数配置下发 -->
  <el-dialog
    title="全局配置系统设置"
    :visible.sync="visible"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="form" :model="tcpForm" label-width="100px" size="small">
      <!-- 涓流功率 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="涓流功率"
        prop="Full_charge_power"
      >
        <el-input
          v-model="tcpForm.Full_charge_power"
          placeholder="请输入涓流功率"
        >
          <span slot="suffix"> W </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 0.1-50W</div>
      </el-form-item>
      <!-- 涓流时间 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="涓流时间"
        prop="FULL_Charge_Delay"
      >
        <el-input
          v-model="tcpForm.FULL_Charge_Delay"
          placeholder="请输入涓流时间"
        >
          <span slot="suffix"> 分钟 </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 1-180分钟</div>
      </el-form-item>
      <!-- 过流阈值 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="过流阈值"
        prop="Threshold_I"
      >
        <el-input v-model="tcpForm.Threshold_I" placeholder="请输入过流阈值">
          <span slot="suffix"> A </span>
        </el-input>
        <div class="tcp-input-tip">
          参考值: 0-11.5A
          【风险提示：调大过流阈值前，请确认插座电线能承受相应的功率，否则可能导致电线烧毁】
        </div>
      </el-form-item>
      <!-- 过载阈值 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="过载阈值"
        prop="Threshold_P"
      >
        <el-input v-model="tcpForm.Threshold_P" placeholder="请输入过载阈值">
          <span slot="suffix"> W </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 0-2200W</div>
      </el-form-item>
      <!-- 空载功率阈值 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="空载功率阈值"
        prop="Null_charge_power"
      >
        <el-input
          v-model="tcpForm.Null_charge_power"
          placeholder="请输入空载功率阈值"
        >
          <span slot="suffix"> W </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 0.1-5W</div>
      </el-form-item>
      <!-- 空载延时时间 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="空载延时时间"
        prop="NULL_Charege_Delay"
      >
        <el-input
          v-model="tcpForm.NULL_Charege_Delay"
          placeholder="请输入空载延时时间"
        >
          <span slot="suffix"> 秒 </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 2-1800秒</div>
      </el-form-item>
      <!-- 高温阈值 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="高温阈值"
        prop="Temp_threshold"
      >
        <el-input v-model="tcpForm.Temp_threshold" placeholder="请输入高温阈值">
          <span slot="suffix"> ℃ </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 0-255℃</div>
      </el-form-item>
      <!-- 最大充电时间 -->
      <el-form-item
        style="margin-bottom: 0px"
        label="最大充电时间"
        prop="Max_Charge_Time"
      >
        <el-input
          v-model="tcpForm.Max_Charge_Time"
          placeholder="请输入最大充电时间"
        >
          <span slot="suffix"> 分钟 </span>
        </el-input>
        <div class="tcp-input-tip">参考值: 1-900分钟</div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitTcpForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { setGlobalTcpConfig } from "@/api/charge/site";

export default {
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      tcpForm: {},
    };
  },
  watch: {
    visible(val) {
      // 数据回填
      if (val) {
        this.tcpForm = {};
      }
    },
  },
  created() {},
  methods: {
    // 参数配置下发
    submitTcpForm() {
      setGlobalTcpConfig({
        tcpConfig: JSON.stringify(this.tcpForm),
      }).then((res) => {
        this.$modal.msgSuccess("参数配置下发成功");
        this.$refs["form"].resetFields();
        this.$emit("success");
      });
    },
    // 关闭
    cancel() {
      this.$refs["form"].resetFields();
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
.site-edit-container {
  display: flex;
}
.info-card {
  height: 100%;
  width: 20%;
  overflow: auto;
  margin-right: 20px;
  flex: 1;
}
.table-card {
  height: 100%;
  width: 80%;
  overflow: auto;
  flex: 3;
  .stat-content {
    width: 50%;
    flex: auto;
    .stat-item {
      margin: 5px 0;
    }
  }
  .divider {
    flex: none;
    height: 60px;
    width: 1px;
    background-color: #efefef;
    margin: 0 20px;
  }
}
.point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  &.primary {
    background-color: #409eff;
  }
  &.success {
    background-color: #67c23a;
  }
  &.warning {
    background-color: #e6a23c;
  }
  &.danger {
    background-color: #f56c6c;
  }
  &.info {
    background-color: #909399;
  }
}
.tcp-input-tip {
  color: #999;
  font-size: 13px;
  line-height: 20px;
  margin: 5px 0;
}
</style>
